<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            width: 33%;
        }
        .btn{
            width: 100%;
        }
    </style>
</head>
<body  style="display: flex;align-content: center;justify-content: space-around;">
<fieldset class="a" >
    <legend>注册</legend>
    <table>
        <tr>
            <td>名字</td>
            <td>
                <input id="regist_name">
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <input id="regist_pwd">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button type="button" id="regist_btn"  class="btn">注册</button>
            </td>
        </tr>
    </table>
</fieldset>
<fieldset>
    <legend>登录</legend>
    <table>
        <tr>
            <td>名字</td>
            <td>
                <input id="login_name">
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <input id="login_pwd">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button type="button" id="login_btn" class="btn" >登录</button>
            </td>
        </tr>
    </table>
</fieldset>
</body>

<script src="jquery-2.2.3.min.js"></script>
<script>
    //入口函数,通常使用和window.onload一样的功效
    //区别:在jquery文件加载后,同时当前的window下面已经有了$和jq对象后,才开始运行
    $(function () {
        $('#regist_btn').on('click',function () {
            regist();
        })
        $('#login_btn').on('click',function () {
            console.log("点击登录");
            login();
        })
    })
    /*注册函数*/
    function regist() {
        future.ajax({
            url:'/users/regist',
            type:'post',
            data:{
                name:$('#regist_name').val(),
                pwd:$('#regist_pwd').val(),
            },
            success:function (result) {
                alert(result)
            }
        })
    }

    function login() {
        future.ajax({
            url:'/users/login',
            type:'get',
            data:{
                name:$('#login_name').val(),
                pwd:$('#login_pwd').val(),
            },
            success:function (result) {
                alert(result)
            }
        })
    }
    let future={};
    future.baseurl='http://localhost:3000';
    //自定义ajax函数
    future.ajax=function (options) {
        console.log(future.baseurl+options.url)
        $.ajax({
            url:future.baseurl+options.url,
            type:options.type||'post',
            async:options.async||false,
            data:options.data,
            success:function (result) {
                if (options.success) {
                    options.success(result)
                }
            },error:function (error) {
                if (options.error) {
                    options.error(error)
                }else{
                    console.log(111 )
                    alert(error.responseText)
                }
            }
        })
    }
</script>

</html>